﻿<!DOCTYPE html>


<html>


<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<link rel="shortcut icon" type="image/png" href="../../assets/logo/logo.png"/>
	
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

	<style>
		body {
			font-family: "Roboto", sans-serif;
			overflow: hidden;
			margin: 0;
			text-align: center;
		}

		canvas {
			z-index: 1;
		}
		
		table {
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		
		td {
			margin: 0;
			padding: 0;
			text-align: centered;
			vertical-align: middle;
		}
		
		.title {
			font-size: 13em;
			font-weight: 700;
			text-transform: uppercase;
			text-shadow: 0 0 0.2em dimgray;
		}
		
		.header {
			text-transform: uppercase;
			font-weight: 300;
			font-size: 2em;
			text-shadow: 0em 0px 0.06em black;
		}
		
		#start {
			z-index: 20;
			color: white;
			cursor: pointer;
			background: rgba(0,0,0,1);
		}
		
		#white {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			background: white;
			filter: opacity(0);
			display: none;
		}
		
		#credits {
			z-index: 30;
			background: white;
			color: black;
			display: none;
		}
		
		.action {
			display: block;
			margin: 0em auto 0.3em auto;
			font-size: 1em;
			text-transform: uppercase;
			font-weight: 700;
		}
		
		.actor {
			margin-top: 0.25em;
			margin-bottom: 2em;
			display: block;
			font-size: 1.25em;
			font-weight: 300;
		}
	</style>
	
	<script type="importmap">
	  {
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.webgpu.min.js",
			"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.webgpu.min.js",
			"three/tsl": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.tsl.min.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
			"tsl-textures": "../../src/tsl-textures.js"
		}
	  }
	</script>
</head>


<body>
	<table id="start">
		<tr><td>
			<div class="header">TSL Observation Deck &mdash; Europa &mdash; Jupiter</div>
		</td></tr>
		<tr><td>
			<div class="title">Protozoa</div>
		</td></tr>
		<tr><td>
			<div class="header" id="hint">Waiting for signal...</div>
		</td></tr>
	</table>
	
	<div id="white"></div>
	<table id="credits">
		<tr><td>
			<span class="action">directed by</span>
			<span class="actor">Pavel Boytchev</span>

			<span class="action">starring</span>
			<span class="actor">Three.js &mdash; TSL-Textures</span>
			

			<span class="action">textures and animation</span>
			<span class="actor">Pavel Boytchev</span>

			<span class="action">sound effects</span>		
			<span class="actor">Fronbondi Skegs &mdash; Jurij &mdash; Otto &mdash; Pixabay &mdash; Samuel F. Johanns</span>

			<span class="action">fonts</span>
			<span class="actor">Christian Robertson</span>

			<br>
			<span class="action">No vertices, textures or shaders were harmed</span>
			<span class="action">during the production of this movie</span>
			<br>
			<br>
			<span class="actor">2024</span>
		</td></tr>
	</table>

	<script type="module">
import "./script.js";
	</script>
</body>
</html>